<template>
  <div class="app-container" style="margin-left:20px;">
    <!--筛选功能-->
    <div class="filter-container">
      <el-input v-model="tableDateName" placeholder="请输入任务名称" style="width: 200px;" class="filter-item" @keyup.enter.native="getsearchlist" />
      <el-button class="filter-item" type="warning" icon="el-icon-search" style="margin-left:20px;" @click="getsearchlist">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" @click="openData">显示全部</el-button>
      <!--新增功能-->
      <el-button class="filter-item" type="success" @click="dialogFormShow">新增</el-button>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :header-cell-style="{background:'dodgerblue',color:'#eeeeee'}" :data="list" fit style="width: 100%;">
      <el-table-column label="序号" width="70px" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column v-if="false" label="ID" align="center" width="60px">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="测试项目" width="350px" header-align="center" align="left">
        <template slot-scope="{row}">
          <span>{{ row.job_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.task_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column type="expand" label="ding_token" width="100%" show-overflow-tooltip header-align="center" align="left">
        <template slot-scope="{row}">
          <span>{{ row.ding_token }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="10%" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @click.native.prevent="handleUpdate(row)" />
          <el-button style="margin-left:10px;" type="primary" icon="el-icon-edit" size="mini" @click="tableRowEdit(row)" />
          <el-button type="warning" size="mini" @click="handleCase(row)">case</el-button>
          <el-button type="text" @click="dialogVisible = true">任务Token</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="任务钩子" :visible.sync="dialogVisible" width="33%">
      <el-divider content-position="left">LINUX</el-divider>
      <span>curl http://qa-api.3imx.cn/ci/jenkins?build_id=${BUILD_ID}\&job_name=${JOB_NAME}</span>
      <el-divider content-position="left">Windows</el-divider>
      <span>curl http://qa-api.3imx.cn/ci/jenkins?build_id=${env:BUILD_ID}\&job_name=${env:JOB_NAME}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <Edit v-if="dialogEdit.show" ref="popBox" :size-forms="sizeForm" destroy-on-close="true" title="编辑用例" @closePop="closePop" />
    <Case :dialog-case="dialogCase" :option1="option1" :taskid="taskid" :sel-list="selList" @addCase="cassel" />
    <el-divider content-position="left" style="color: dodgerblue" />
    <taskAdd v-if="dialogAdd" @closePop="dialogFormClose" />
    <!--分页功能-->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page_num" :limit.sync="listQuery.page_per" @pagination="getList" />

  </div>
</template>
<script>
import Edit from './components/task-edit-new'
import Case from './components/task-case'
import taskAdd from './components/task-add'
import { task_list, search } from '@/api/ci'
import { begtask, stoptask, sel_taskcase, get_group } from '@/api/ci'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Edit,
    Case,
    taskAdd,
    Pagination
  },
  data() {
    return {
      /* 搜索*/
      sizeForms: {
        task_name: '',
        job_name: '',
        ding_token: ''
      },
      dialogVisible: false,
      listLoading: true,
      tableDateName: '',
      list: null,
      // showReviewer: true,
      tableKey: 0,
      listQuery: {
        create_time: '',
        ding_token: '',
        id: '',
        job_name: '',
        status: '',
        page_num: 1,
        page_per: 20,
        task_name: '',
        search: ''
      },
      /* 分页*/
      total: 0,
      /* 列表数据*/
      dialogAdd: false,
      // 编辑
      dialogEdit: {
        show: false
      },
      sizeForm: {},
      dialogCase: {
        show: false
      },
      option1: [],
      taskid: Number,
      selList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 新增任务组件展示
    dialogFormShow() {
      this.dialogAdd = true
    },
    // 取消新增任务
    dialogFormClose(e) {
      this.dialogAdd = false
      if (e === 'success') {
        this.getList()
      }
    },
    getList() {
      this.listLoading = true
      task_list(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    getsearchlist() {
      this.listQuery.search = this.tableDateName
      search(this.listQuery).then((res) => {
        this.list = res.data.items
        this.total = res.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    tableRowEdit(row) {
      this.dialogEdit.show = true
      this.sizeForm = row
    },
    handleCase(row) {
      this.dialogCase.show = true
      this.taskid = row.id
      get_group()
        .then((res) => {
          this.option1 = res.data
        })
      this.cassel()
    },
    closePop(formName) {
      this.dialogEdit.show = false
      this.sizeForm = {
        create_time: '',
        ding_token: '',
        id: '',
        job_name: '',
        status: '',
        task_name: ''
      }
    },
    cassel() {
      var id = this.taskid
      sel_taskcase(id)
        .then((res) => {
          this.selList = res.data
        })
        .catch((error) => {
          alert(error)
        })
    },
    /* 显示全部数据*/
    openData() {
      this.tableDateName = ''
      this.getList()
    },
    handleUpdate(row) {
      var id = row.id
      if (row.status === 1) {
        begtask(id)
          .then(res => {
            this.$message({
              type: 'success',
              message: res.message
            })
          })
      } else {
        stoptask(id)
          .then(res => {
            this.$message({
              type: 'success',
              message: res.message
            })
          })
      }
    }
  }
}

</script>
<style>
/*表头太高，修改此样式*/
.el-main {
  /*background-color: #eeeeee;*/
  line-height: 14px;
}

.monitor—list {
  width: 90%;
  height: 100%;
  margin: 40px 30px;
  position: relative;
}

</style>
